<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<title>文件上传界面</title>

<css>
<link
	href="${pageContext.request.contextPath }/assets/lib/css/file/bootstrap/css/bootstrap.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath }/assets/lib/css/file/fileinput.css"
	media="all" rel="stylesheet" type="text/css" />

</css>



<!--提示语 S  -->
<div class="container">
	<h1>文件上传组件，使用前先要导入js/css，lib下jar包</h1>
</div>
<!--提示语 E -->

<!-- 文件上传 S -->
<!-- name="file-zh[]" 插件里面使用到了，请注意不要改动 -->
<div class="container kv-main">
	<form enctype="multipart/form-data">
		<label>上传图片</label> <input id="file-zh" name="file-zh[]" type="file"
			multiple enctype="multipart/form-data">
	</form>
</div>
<!-- 文件上传 E -->


<div class="container">
	<p style="text-align: center;"">将"七牛"返回的url写到下面的input的value里，本来是隐藏的type="hidden"，为了调试方便type="text"</p>
	<input id="imgulr" type="text" value=""
		style="width: 100%; height: 35px; padding-left: 20px;">
</div>

<js> <script
	src="${pageContext.request.contextPath }/assets/lib/js/file/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath }/assets/lib/js/file/fileinput.js"
	type="text/javascript"></script> <script
	src="${pageContext.request.contextPath }/assets/lib/js/file/locales/zh.js"
	type="text/javascript"></script> <script
	src="${pageContext.request.contextPath }/assets/lib/js/file/bootstrap-3.3.4.js"
	type="text/javascript"></script> <script>
		$('#file-zh').fileinput({
			language : 'zh', //设置语言，简体中文
			uploadUrl : '${pageContext.request.contextPath }/ImgUpload', //上传的地址
			allowedFileExtensions : [ 'jpg', 'png', 'gif' ],//接收的文件后缀,
			maxFileCount : 1,//最大上传1张图片，根据具体情况而定
			enctype : 'multipart/form-data',
			showUpload : true, //是否显示上传按钮
			showCaption : false,//是否显示标题
			browseClass : "btn btn-primary", //按钮样式             
			previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
			msgFilesTooMany : "只允许上传{m}张图片！"
		});

		/* 上传的回调函数 ，依靠data.response.url取到回调的json*/
		$("#file-zh").on("fileuploaded",
				function(event, data, previewId, index) {
					var urldata = data.response.url;

					//赋值给隐藏域
					$("#imgulr").val(urldata);
				});
	</script> </js>
